<template>
  <div
    id="container"
    class="about"
  >
    <h1>This is an about page</h1>

    <el-button>
      about
    </el-button>
  </div>
</template>
<script lang="ts" setup>
import { ACESFilmicToneMapping, Cache, Color, PCFSoftShadowMap, PMREMGenerator, PerspectiveCamera, Scene, WebGLRenderer, sRGBEncoding } from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment'
import { onMounted } from 'vue'

onMounted(() => {
  const viewerDom = document.getElementById('container') as HTMLElement
  const renderer = new WebGLRenderer({
    logarithmicDepthBuffer: true,
    antialias: true, // true/false表示是否开启反锯齿
    alpha: true, // true/false 表示是否可以设置背景色透明
    precision: 'highp', // highp/mediump/lowp 表示着色精度选择
    premultipliedAlpha: true, // true/false 表示是否可以设置像素深度（用来度量图像的分辨率）
    preserveDrawingBuffer: true // true/false 表示是否保存绘图缓冲
  })
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(viewerDom.clientWidth, viewerDom.clientHeight)
  // 默认情况下，js的光强数值不真实。为了使得光强更趋于真实值，应该把渲染器的physicallyCorrectLights属性设为true
  renderer.useLegacyLights = true
  renderer.toneMapping = ACESFilmicToneMapping // 尽管我们的贴图不是HDR，但使用tone mapping可以塑造更真实的效果。
  // renderer.toneMapping = ReinhardToneMapping // 使用辉光效果（toneMapping-调整场景渲染颜色，色调映射）
  renderer.shadowMap.enabled = true // 场景中的阴影自动更新
  renderer.shadowMap.type = PCFSoftShadowMap // 设置渲染器开启阴影贴图，并将类型设为PCFSoftShadowMap
  renderer.outputEncoding = sRGBEncoding // 这下我们可以看到更亮的材质，同时这也影响到环境贴图。
  viewerDom.appendChild(renderer.domElement)// 一个canvas，渲染器在其上绘制输出。

  const pmremGenerator = new PMREMGenerator(renderer)
  const room = new RoomEnvironment()
  const roomTexture = pmremGenerator.fromScene(room)
  const scene = new Scene()
  scene.background = new Color('rgb(5,24,38)')
  scene.environment = roomTexture.texture
  roomTexture.texture.dispose()

  const camera = new PerspectiveCamera(45, viewerDom.clientWidth / viewerDom.clientHeight, 10, 20000)
  camera.position.set(1, 1, 1)
  camera.lookAt(0, 0, 0)

  const controls = new OrbitControls(camera, renderer.domElement)

  function render (): void {
    controls.update()
    renderer.render(scene, camera)
  }

  render()
})
</script>
